<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>选择地址</title>
    <#include "common/header.ftl"/>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <!--引入高德地图JSAPI -->
    <script type="text/javascript"
            src="http://webapi.amap.com/maps?v=1.4.3&key=8ec03cefa8da3d5e6afb4f10ed17109d&plugin=AMap.Geocoder"></script>
    <!-- UI组件库 1.0 -->
    <script src="http://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<#--<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>-->
    <style>
        html,
        body,
        #container {
            width: 100%;
            height: 100%;
            margin: 0px;
            text-align: center;
            font-size: 13px;
        }

        #pickerBox {
            position: absolute;
            z-index: 9999;
            left: 25%;
        }

        #pickerBoxBottom {
            position: absolute;
            z-index: 9998;
            bottom: 4%;
            left: 25%;
        }

        #pickerInput {
            width: 100%;
            padding: 5px 5px;
        }

        #spanAddress {
            padding: 5px 5px;
        }

        #poiInfo {
            background: #fff;
        }

        .amap_lib_placeSearch .poibox.highlight {
            background-color: #CAE1FF;
        }

        .amap_lib_placeSearch .poi-more {
            display: none !important;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $("#locationForm").submit(function () {
                var location = $("#spanAddress").val();
                var flag;
                var msg;
                $.ajax({
                    type: "GET",
                    url: "checkLocation?keyword=" + location,
                    dataType: "json",
                    async: false,
                    success: function (data) {
                        console.log(data);
                        flag = data.success;
                        msg = data.msg;
                    }
                })
                console.log(msg);
                if (!flag) {
                    $.messager.popup(msg);
                }
                return flag;
            })
        })
    </script>
</head>
<body>
<div id="pickerBox">
    <form class="navbar-form" role="search">
        <div class="form-group">
            <input type="text" id="pickerInput" class="form-control" placeholder="输入关键字选取地点">
            <div id="poiInfo"></div>
        </div>
    </form>
</div>

<div id="pickerBoxBottom">
    <form id="locationForm" class="navbar-form navbar-center" role="search" action="orderBill" method="post">
        <div class="form-group">
            <input type="text" name="location" id="spanAddress" class="form-control" readonly="true"/>
        </div>
        <button type="submit" id="submit" class="btn btn-default">确定</button>
    </form>
</div>
<div id='container'></div>
<div id="tip"></div>
<script type="text/javascript">
    /***************************************
     由于Chrome、IOS10等已不再支持非安全域的浏览器定位请求，为保证定位成功率和精度，请尽快升级您的站点到HTTPS。
     ***************************************/
    var map, geolocation;
    //加载地图，调用浏览器定位服务
    map = new AMap.Map('container', {
        resizeEnable: true,
        zoom: 20
    });
    //单击地图跳到指定地点
    map.on("click", function (e) {
        map.clearMap();
        var marker = new AMap.Marker({
            animation: 'AMAP_ANIMATION_DROP'
        });
        var infoWindow = new AMap.InfoWindow({
            offset: new AMap.Pixel(0, -20)
        });
        var geocoder = new AMap.Geocoder({
            radius: 1000,
            extensions: "all"
        });

        marker.setMap(map);
        infoWindow.setMap(map);
        marker.setPosition(e.lnglat);
        infoWindow.setPosition(e.lnglat);

        //----------------------------
        //逆地理编码
        var lnglatXY = [e.lnglat.M, e.lnglat.O];
        geocoder.getAddress(lnglatXY, function (status, result) {
            if (status === 'complete' && result.info === 'OK') {
                //获得了有效的地址信息:
                //即，result.regeocode.formattedAddress
                var address = result.regeocode.formattedAddress;
                infoWindow.setContent(address);
                $("#spanAddress").val(address);
            } else {
                //获取地址失败
                infoWindow.setContent("没有找到");
            }
        });
        //----------------------------------
        map.setCenter(e.lnglat);
    })


    map.plugin('AMap.Geolocation', function () {
        geolocation = new AMap.Geolocation({
            enableHighAccuracy: true,//是否使用高精度定位，默认:true
            timeout: 10000,          //超过10秒后停止定位，默认：无穷大
            buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
            zoomToAccuracy: true,      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            buttonPosition: 'RB'
        });
        map.addControl(geolocation);
        geolocation.getCurrentPosition();
        AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
        AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
    });

    //解析定位结果
    function onComplete(data) {
        var str = ['定位成功'];
        str.push('经度：' + data.position.getLng());
        str.push('纬度：' + data.position.getLat());
        if (data.accuracy) {
            str.push('精度：' + data.accuracy + ' 米');
        }//如为IP精确定位结果则没有精度信息
        str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
        //document.getElementById('tip').innerHTML = str.join('<br>');
        //逆地理编码
        var geocoder = new AMap.Geocoder({
            radius: 1000,
            extensions: "all"
        });
        var lnglatXY = [data.position.getLng(), data.position.getLat()];
        console.log(lnglatXY);
        geocoder.getAddress(lnglatXY, function (status, result) {
            if (status === 'complete' && result.info === 'OK') {
                //获得了有效的地址信息:
                //即，result.regeocode.formattedAddress
                var address = result.regeocode.formattedAddress;
                $("#spanAddress").val(address);
            } else {
                //获取地址失败
                $("#spanAddress").val();
            }
        });
    }

    //解析定位错误信息
    function onError(data) {
        //document.getElementById('tip').innerHTML = '定位失败';
    }

    AMapUI.loadUI(['misc/PoiPicker'], function (PoiPicker) {
        var poiPicker = new PoiPicker({
            //city:'北京',
            input: 'pickerInput'
        });
        //初始化poiPicker
        poiPickerReady(poiPicker);
    });

    function poiPickerReady(poiPicker) {
        window.poiPicker = poiPicker;
        var marker = new AMap.Marker({
            animation: 'AMAP_ANIMATION_BOUNCE'
        });
        var infoWindow = new AMap.InfoWindow({
            offset: new AMap.Pixel(0, -20)
        });

        //选取了某个POI
        poiPicker.on('poiPicked', function (poiResult) {
            var source = poiResult.source,
                    poi = poiResult.item,
                    info = {
                        source: source,
                        id: poi.id,
                        name: poi.name,
                        location: poi.location.toString(),
                        address: poi.address
                    };

            marker.setMap(map);
            infoWindow.setMap(map);

            marker.setPosition(poi.location);
            infoWindow.setPosition(poi.location);

            infoWindow.setContent(info.name);
            infoWindow.open(map, marker.getPosition());
            $("#spanAddress").val(info.name);
            map.setCenter(marker.getPosition());
        });

        poiPicker.onCityReady(function () {
            poiPicker.suggest('');
        });
    }

</script>
</body>
</html>